class Detail{
    constructor(){
        this.url = "data/goods.json";
        this.cartBtn = document.getElementById("cartBtn");
        this.inputBtn = document.getElementsByClassName("detail-sum")[0].children[1];
        this.priceSum = document.getElementById("price-sum");
        //商品列表请求
        this.getGoodsRequest();
        
        //精确该商品数据
        this.selfData = {};
        
        this.addEvent();

        //放大镜效果相关元素
        this.omovebox = document.getElementsByClassName("move-pic-box")[0];
        this.simg = document.querySelector(".move-pic-box img");
        this.ospan = document.querySelector(".move-pic-box span");
        this.bbox = document.getElementsByClassName("big-img-box")[0];
        this.bimg = document.querySelector(".big-img-box img");
        this.lensInit();
    }
    lensInit(){
        var that = this;
        //移入
        this.omovebox.onmouseover = function(){
            that.lensShow();
        }
        //移出
        this.omovebox.onmouseout = function(){
            that.lensHide()
        }
        //移动
        this.omovebox.onmousemove = function(eve){
            var e = eve || window.event;
            that.lensMove(e);
        }
    }
    lensShow(){
        this.bbox.style.display = "block";
        this.bbox.style.top = this.omovebox.parentNode.offsetTop + "px";
        this.bbox.style.left = this.omovebox.parentNode.offsetLeft + this.omovebox.parentNode.clientWidth + 10 + "px";
        this.ospan.style.display = "block";

        var radio = this.bbox.clientWidth/this.bimg.clientWidth;
        this.ospan.style.width = radio * this.omovebox.clientWidth + 'px';
        this.ospan.style.height = radio * this.omovebox.clientHeight + "px";

        // console.log(radio,this.omovebox.clientWidth,this.omovebox.clientHeight)

        this.moveboxL = this.omovebox.offsetLeft;
        this.moveboxT = this.omovebox.offsetTop;
        this.ospanW = this.ospan.clientWidth;
        this.ospanH = this.ospan.clientHeight;

        this.moveboxW = this.omovebox.clientWidth;
        this.moveboxH = this.omovebox.clientHeight;
        this.bimgW = this.bimg.clientWidth;
        this.bimgH = this.bimg.clientHeight;
        this.bboxW = this.bbox.clientWidth;
        this.bboxH = this.bbox.clientHeight;
    }
    lensHide(){
        this.bbox.style.display = "none";
        this.ospan.style.display = "none";
    }
    lensMove(e){
        var l = e.clientX - this.moveboxL - this.ospanW/2;
        var t = e.clientY - this.moveboxT - this.ospanH/2;
        if(l < 0){
            l = 0;
        }
        if(l > this.moveboxW - this.ospanW){
            l=this.moveboxW - this.ospanW;
        }
        if(t <0){
            t = 0;
        }
        if(t>this.moveboxH - this.ospanH){
            t = this.moveboxH - this.ospanH;
        }
        this.ospan.style.left = l + "px";
        this.ospan.style.top = t + "px";

        var mRadiox = l/(this.moveboxW-this.ospanW);
        var mRadioy = t/(this.moveboxH-this.ospanH);
        this.bimg.style.left = -mRadiox*(this.bimgW-this.bboxW) + "px";
        this.bimg.style.top = -mRadioy*(this.bimgH-this.bboxH) + "px";
    }
    addEvent(){
        var that = this;
        this.cartBtn.addEventListener("click",function(){
            that.setData();
        })
        this.inputBtn.addEventListener("input",function(){
            if(this.value < 1){
                this.value = 1;
            }
            that.priceSum.innerHTML = `￥${(that.selfData.price*this.value).toFixed(2)}`;
        })
    }

    setData(){
        var shopData =  localStorage.getItem("shopData") ? JSON.parse(localStorage.getItem("shopData")) : [];
        if(shopData.length < 1){
            shopData.push({
                id:this.selfData.goodsId,
                num: this.inputBtn.value,
                price:this.selfData.price
            })
        }else{
            let i = 0;
            let flag = shopData.some((val,idx)=>{
                i = idx;
                return val.id === this.selfData.goodsId;
            })
            if(flag){
                shopData[i].num = this.inputBtn.value;
            }else{
                shopData.push({
                    id:this.selfData.goodsId,
                    num: this.inputBtn.value,
                    price:this.selfData.price
                })
            }
        }
        localStorage.setItem("shopData",JSON.stringify(shopData));
    }

    getGoodsRequest(){
        $.ajax({
            url:this.url,
            success:(res)=>{
                this.res = JSON.parse(res);
                //设置自身数据
                this.setGoodSelf();
                //渲染页面
                this.detailRender();
            }
        })
    }
    detailRender(){
        document.getElementsByClassName("detail-tip")[0].children[2].innerHTML = this.selfData.name;
        document.getElementsByClassName("detail-img-box")[0].children[0].children[0].src = this.selfData.img;
        document.getElementsByClassName("detail-img-box")[1].children[0].src = this.selfData.img;
        const detailBase = document.getElementsByClassName("detail-base-r-main")[0];
        detailBase.previousElementSibling.innerHTML = this.selfData.name+this.selfData.xinghao+this.selfData.specification;
        const ali = detailBase.querySelectorAll("ul li");
        ali[0].innerHTML = `<span>品牌：</span>${this.selfData.brand}`;
        ali[1].innerHTML = `<span>产品型号：</span>${this.selfData.xinghao}`;
        ali[2].innerHTML = `<span>产品编号：</span>${this.selfData.bianhao}`;
        ali[3].innerHTML = `<span>供应商：</span>${this.selfData.supply}`;
        ali[4].innerHTML = `<span>产品规格：</span>${this.selfData.specification}`;
        ali[5].innerHTML = `<span>库存：</span>${this.selfData.quantity}`;
        ali[6].innerHTML = `<span>最小包装：</span>${this.selfData.min_packing}`;
        ali[7].innerHTML = `<span>起订量：</span>${this.selfData.min_num}`;
        this.priceSum.innerHTML = `￥${this.selfData.price}`;
    };
    setGoodSelf(){
        this.goodId = location.search.slice(1).split("=")[1];
        var i = 0;
        this.res.some((val,idx)=>{
            i = idx;
            return val.goodsId === this.goodId;
        })
        this.selfData = {...this.res[i]};
        console.log(this.selfData)
    }
}
new Detail;